<template>
  <div>
    <el-card style="width: 65%">
      <el-form :rules="rules" ref="changeRef" @submit.native.prevent :model="changeForm" label-width="80px"
               style="display: flex;align-items: center;justify-content: center; flex-direction: column;">
        <div style="text-align: center; font-weight: bold; font-size: 20px; margin-bottom: 20px">修改密码</div>
        <el-form-item label="原密码" prop="originalPassword">
          <el-input v-model="changeForm.originalPassword" placeholder="请输入原密码" show-password
                    ref="beginInput"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="changeForm.newPassword" placeholder="长度在3到20个字符" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="changeForm.confirmPassword" placeholder="请确认密码" show-password></el-input>
        </el-form-item>
        <el-button type="primary" native-type="submit" @click="update">修 改</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'PasswordChange',
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem('user')) || {},
      changeForm: {
        originalPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules: {
        originalPassword: [
          {required: true, message: '请输入原密码', trigger: 'blur'},
          {validator: this.validateOriginal, trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur'},
          {validator: this.validateNew, trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {validator: this.validateConfirm, trigger: 'blur'}
        ],
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.beginInput.focus()
    })
  },
  methods: {
    validateOriginal(rule, value, callback) {
      if (value !== this.loginUser.password)
        callback(new Error('原密码错误'))
      else callback()
    },
    validateNew(rule, value, callback) {
      if (value === this.loginUser.password)
        callback(new Error('新密码不能与原密码相同'))
      else callback()
    },
    validateConfirm(rule, value, callback) {
      if (value !== this.changeForm.newPassword)
        callback(new Error('确认密码应与新密码相同'))
      else callback()
    },
    update() {
      this.$refs['changeRef'].validate(valid => {
        if (valid) {
          this.loginUser.password = this.changeForm.newPassword
          request.put('/user/update', this.loginUser).then(res => {
            if (res.code === '200') {
              localStorage.setItem('user', JSON.stringify(this.loginUser))
              //将消息传递给父组件
              this.$emit('update:user')//,this.loginUser
              this.$message.success('修改成功，请重新登录')
              localStorage.removeItem('user')
              this.$router.push('/login')
            } else this.$message.error(res.msg)
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
